<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!--新闻审批-->
    <!--新闻审批-->
    <!--新闻审批-->


</head>
<body>
<div id="app">
    <el-form  :inline="true"  class="demo-form-inline">
        <el-form-item label="新闻标题">
            <el-input v-model="search.total" placeholder="请输入新闻标题"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="search.author" placeholder="请输入作者"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button  type="primary" @click="onSubmit()">搜索</el-button>
        </el-form-item>
    </el-form>
    <template>

        <el-table
                :data="newsArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="申请编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="新闻题目"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="category.category"
                    label="新闻类别"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="申请时间"
                    width="320">
            </el-table-column>
            <el-table-column
                    v-if="show"
                    prop="status.status"
                    label="状态"
                    width="50">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="details(scope.row.id)">详情</el-button>
                    <el-button type="success" id="b1" @click="yes(scope.row.id)"  :disabled="scope.row.status.status == '审核成功' ? true :false">通过</el-button>
                    <el-button type="danger" id="b2" @click="no(scope.row.id)"   :disabled="scope.row.status.status  == '审核未过' ? true :false">不通过</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <el-pagination
            style="text-align: center; margin: 0 auto;"
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

    <!--新闻详情-->

    <el-dialog title="新闻内容"
            :model="to"
            :visible.sync="centerDialogVisible"
            width="60%"
            style="text-align: center"
            center>

        <p v-html="to.content" style="text-align: center"></p>

        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="拒绝理由"
               :model="refuse"
               :visible.sync="centerDialog"
               width="35%"
               center>

        <el-input
                type="textarea"
                :row="10"
                v-model="refuse.reason">
        </el-input>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialog = false">取 消</el-button>
        <el-button type="success" @click="sending()">确 定</el-button>
      </span>
    </el-dialog>
</div>

<script>

    var haha = new Vue({
        el:"#app",
        data:{
            search:{},
            to:{},
            refuse:{},
            newsArr:[],
            totalCount:0,
            centerDialogVisible:false,
            centerDialog:false,
            show:false
        },
        methods:{

            //通过按钮    在 NewsApprovalController 层
            yes(id){
                $.get("/ssm/verify/pass/"+id,function (backData) {
                    getData(1,10);
                    haha.$message({
                        message: '审核成功',
                        type: 'success'
                    });
                    // $.get("/ssm/verify/passUpdate",function (backData) {
                    //
                    // })
                })
            },
            //拒绝理由---> 确定按钮     发送数据到后台 在 NewsApprovalController 层
            sending(){
                $.post("/ssm/verify/revert",haha.refuse,function (backData) {
                    haha.centerDialog=false;
                    getData(1,10);
                    haha.$message('新闻被打回');

                    haha.$refs["refuse"].resetFields();
                });
            },
            //不通过按钮  获取点击id  输入拒绝理由
            no(id){
                    haha.refuse.id = id;
                    haha.centerDialog = true;
            },
            //详情按钮  查看新闻  在NewsController 层
            details(id){
                $.get("/ssm/news/get/"+id,function (backData) {
                    haha.centerDialogVisible = true;
                    haha.to = backData.data;
                });
            },
            handleCurrentChange( val ){
                getData(val,10);
            },
            onSubmit(){
                getData(1,10);
            }
        }
    });

    function getData(a , b) {
        haha.search.pageNo = a;
        haha.search.pageCount = b;
        //获取全部新闻，展示到表格中
        $.post("/ssm/news/query",haha.search,function (backData) {
            haha.newsArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        });
    }
    getData(1,10)
</script>
</body>
</html>


